<template>
  <page-header-wrapper :title="false">
    <a-button style="margin-bottom:20px" type="primary" icon="plus" @click="handleAddClick">增加</a-button>
    <a-card class="content-card">
      <a-table 
        size="middle" 
        :columns="columns" 
        :data-source="data" 
        :rowKey="(r) => r.id" 
        :pagination="false" 
        :scroll="{x: _width}"
      >
        <template slot="action" slot-scope="t, r, i">
          <a @click="handleEditorClick(r, i)">修改</a>
          <a-divider type="vertical"></a-divider>
          <a-popconfirm title="您确定要删除吗?" ok-text="确定" cancel-text="取消" @confirm="handleDeleteClick(r)">
            <a>删除</a>
          </a-popconfirm>
        </template>
      </a-table>
    </a-card>
    <!-- 新增 -->
    <CreateModal ref="createModal" :parent="this"></CreateModal>
  </page-header-wrapper>
</template>

<script>
import CreateModal from './modules/CreateModal.vue'
import { getOffice, deleteOffice } from '@/api/manage'
import { showMessage } from '@/utils/mixins'

export default {
  name: 'Office',
  mixins: [showMessage],
  components: {
    CreateModal,
  },
  data() {
    return {
      columns: [
        { title: '序号', customRender: (t, r, i) => `${i + 1}`, align: 'center', width: 120, fixed: 'left' },
        { title: '办事处名称', dataIndex: 'name', key: 'name', width: 400},
        { title: '办事处电话', dataIndex: 'tel', key: 'tel', width: 100},
        { title: '办事处地址', dataIndex: 'address', key: 'address',width: 600,ellipsis: true },
        { title: '操作', scopedSlots: { customRender: 'action' }, width: 100, fixed: 'right', align: 'center' },
      ],
      data: [],
    }
  },
  computed: {
    _width() {
      return this.columns.reduce((x,y) => {return x+y.width},0 )
    }
  },
  methods: {
    // 修改
    handleEditorClick(r, i) {
      const _form = this.$refs.createModal.form
      for(const key in _form) {
        _form[key] = r[key]
      }
      this.$refs.createModal.status = 2
      this.$refs.createModal.id = r.id
      this.$refs.createModal.title = `修改`
      this.$refs.createModal.visible = true
    },
    // 新增
    handleAddClick() {
      this.$refs.createModal.visible = true
      this.$refs.createModal.title = `新增`
      this.$refs.createModal.status = 1
    },
    // 删除首页图片
    handleDeleteClick(r) {
      deleteOffice({ id: r.id }).then((res) => {
        this.showMessage(res, this.getList)
      })
    },
    // 获取首页数据
    getList() {
      getOffice().then((res) => {
        if (res.code == '0') {
          this.data = res.data
        }
      })
    },
  },
  mounted() {
    this.getList()
  },
}
</script>